<template>
    <div class="mod-menu">
        <!-- v-if="isAuth('sys:menu:save')"  -->
      <el-form :inline="true" :model="dataForm">
        <el-form-item>
          <el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="dataList"
        row-key="menuId"
        :loding="dataListLoading"
        border
        height="100%"
        style="width: 100%; ">
        <el-table-column
          prop="name"
          header-align="center"
          min-width="150"
          label="名称" >
        </el-table-column>
        <el-table-column
          prop="parentName"
          header-align="center"
          align="center"
          width="120"
          label="上级菜单">
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          label="图标">
          <template v-slot="scope">
            <!-- <icon-svg :name="scope.row.icon || ''"></icon-svg> -->
            <el-icon :size="20"><component :is="scope.row.icon" /></el-icon>
          </template>
        </el-table-column>
        <el-table-column
          prop="type"
          header-align="center"
          align="center"
          label="类型">
          <template v-slot="scope">
            <el-tag v-if="scope.row.type === 0" size="small">目录</el-tag>
            <el-tag v-else-if="scope.row.type === 1" size="small" type="success">菜单</el-tag>
            <el-tag v-else-if="scope.row.type === 2" size="small" type="info">按钮</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="orderNum"
          header-align="center"
          align="center"
          label="排序号">
        </el-table-column>
        <el-table-column
          prop="url"
          header-align="center"
          align="center"
          width="150"
          :show-overflow-tooltip="true"
          label="菜单URL">
        </el-table-column>
        <el-table-column
          prop="perms"
          header-align="center"
          align="center"
          width="150"
          :show-overflow-tooltip="true"
          label="授权标识">
        </el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="150"
          label="操作">
          <template v-slot="scope">
            <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.menuId)">修改</el-button>
            <el-button type="text" size="small" @click="deleteHandle(scope.row.menuId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 弹窗, 新增 / 修改 v-if="isAuth('sys:menu:delete')"v-if="isAuth('sys:menu:update')" -->
      <el-dialog :title="!checkId ? '新增' : '修改'" width="600" v-model="addOrUpdateVisible">
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :id="checkId" @refreshDataList="getDataList"></add-or-update>
      </el-dialog>
    </div>
  </template>
  
<script setup>
import AddOrUpdate from './menu-add-or-update.vue'
import { treeDataTranslate, isAuth } from '@/utils/index.js'
import {getMenus, delMenu} from '@/server/manage/sys.js'
import {ElTable, ElTableColumn, ElButton, ElTag, ElForm, ElFormItem, ElMessageBox, ElMessage, ElIcon, ElDialog} from 'element-plus'
import { reactive, ref } from 'vue';
const dataListLoading = ref(false)
const dataList = ref([])
const dataForm = reactive({})
const addOrUpdateVisible = ref(false)
const checkId = ref()
// 获取数据列表
const getDataList = () => {
    dataListLoading.value = true
    addOrUpdateVisible.value = false
    getMenus().then((data) => {
        dataList.value = treeDataTranslate(data, 'menuId')
        dataListLoading.value = false
    })
}
getDataList()
// 新增 / 修改
const addOrUpdateHandle = (id) => {
    id && (checkId.value = id)
    addOrUpdateVisible.value = true
}
// 删除
const deleteHandle = (id) => {
    ElMessageBox.confirm('您确定删除吗？','提示',
        {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',}
    ).then(() => {
        delMenu(id).then(res => {
            ElMessage({ type: 'success', message: '删除成功！'})
            getDataList()
        })
    })
}
  </script>
  